import React, { useState } from 'react'
/* 
    useState:
        - 可以让函数支持state状态,就类似于类式组件中的state状态机
        - useState() 方法里面唯一的参数就是初始的 state 数据
        - useState会返回一个只有两个元素的数组
            - 第一个元素就是当前 state 的值
            - 第二个元素是一个函数,用来替换原来state中的值,这个函数修改state和setState一样是异步的
        - React 会在重复渲染时记住它当前state的值,并提供最新的值给我们的函数
*/
export default function App() {
  // console.log(useState(0));
  const [count, setCount] = useState(0);
  const [isHot,setIsHot]= useState(true)

  const setCountHandle = () => {
    setCount(count + 1)
  }
  const setisHotHandle=()=>{
    setIsHot(!isHot)
  }
  // 这里打印可以发现,每次都重新渲染了,但是我们累加的值是一直在增加的,并不是重新渲染让值恢复初始值,因此可以发现
  // React 会在重复渲染时会记住它当前state的值,并提供最新的值给我们的函数
  console.log('重新渲染了');
  return (
    <div>
      <h1>累加的值是:{count}</h1>
      <button onClick={setCountHandle}>累加</button>
      <hr />
      <h1>今天天气真{isHot?'热啊':'冷啊'}</h1>
      <button onClick={setisHotHandle}>累加</button>
    </div>
  )
}
/* 
    useState基础操作流程(状态钩子,类似于类式组件中的state状态机)
        - 1.将useState解构出来,第一个变量代表着初始state数据,第二个变量表示一个函数,这个函数用来替换初始state的值
        - 2.在return后天添加元素节点,例如绑定事件来修改我们的数据,这里需要设置事件函数
        - 3.在return前面调用事件函数,在函数内部对数据进行操作,这里就需要用到上面useState解构出来的的第二个元素来操作

*/

/* 
    钩子（hook）就是 React 函数组件的副效应解决方案，用来为函数组件引入副效应**.Hook 是能让你在函数组件中“钩入” React 特性的函数。它们名字通常都以 use 开始
        三种常用钩子:
            useState()：保存状态
            useContext()：保存上下文
            useEffect()是通用的副效应钩子
*/